Angular 未找到'；AppModule'；角度5

我正在用ASP.NET Core 2开发一个Angle应用程序

我已经将它升级到Angular 5，并尝试在Azure上发布它。问题是我得到了错误：

No NgModule metadata found for 'AppModule'

当我尝试在“生产”设置下运行应用程序时，但如果我尝试在“开发”设置下运行应用程序，则并非总是如此

我知道我错过了什么，但我不知道是什么

我遵循了

因此，我：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
import { UserService } from "../../services/Authorization/user.service";

import { Subscription } from 'rxjs/Subscription';
import { ServerBusyService } from "../../services/serverBusy.service";

@Component({
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    loginSubscription: Subscription;
    logoutSubscription: Subscription;

    constructor(/*private translate: TranslateService,*/
        public userService: UserService,
        public serverBusyService: ServerBusyService
    ) {
        // this language will be used as a fallback when a translation isn't found in the current language
        //translate.setDefaultLang('en');

        // the lang to use, if the lang isn't available, it will use the current loader to get them
        //translate.use('en');

    }

    ngOnInit() {
        if (this.userService.isLoggedIn && !this.userService.email) {
            this.userService.getLogeddInUserInfo().subscribe((x: any) => x);
        }
    }

    switchLanguage(language: string) {
        //this.translate.use(language);
    }

    onDeactivate() {
        document.body.scrollTop = 0;
        window.scrollTo(0, 0);
    }
}

app.module.browser.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.module';
import { AppComponent } from './components/app/app.component';
import { ORIGIN_URL } from "./constansts/baseurl.constants";
import { UserService } from "./services/Authorization/user.service";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserPrebootModule } from 'preboot/browser';

export function getOriginUrl() {
    return window.location.origin;
}


@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserPrebootModule.replayEvents(),
        BrowserAnimationsModule,
        AppModuleShared
    ],
    providers: [
        {
            // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
            // (Also remember the Server requires Absolute URLs)
            provide: ORIGIN_URL,
            useFactory: (getOriginUrl)
        },
        {
            provide: 'BASE_URL',
            useFactory: getBaseUrl
        },
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.browser';

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app');
        const newRootElem = document.createElement('app');
        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

app.module.server.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModuleShared } from './app.module';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule,
        AppModuleShared
    ]
})
export class AppModule {
}

import 'reflect-metadata';
import 'zone.js';
import 'rxjs/add/operator/first';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppModule } from './app/app.module.server';


import { ORIGIN_URL } from './app/constansts/baseurl.constants';

enableProdMode();

export default createServerRenderer(params => {
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
        { provide: ORIGIN_URL, useValue: params.origin }
    ];

    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
        const state = moduleRef.injector.get(PlatformState);
        const zone = moduleRef.injector.get(NgZone);

        return new Promise<RenderResult>((resolve, reject) => {
            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
            appRef.isStable.first(isStable => isStable).subscribe(() => {
                // Because 'onStable' fires before 'onError', we have to delay slightly before
                // completing the request in case there's an error to report
                setImmediate(() => {
                    resolve({
                        html: state.renderToString()
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

app.module.ts

import { NgModule, PlatformRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { UserComponent } from "./components/user/list.user.component";
import { ListErrorComponent } from "./components/error/error.component";

import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from "@angular/common/http";

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { ORIGIN_URL } from "./constansts/baseurl.constants";
import { LoginFormComponent } from "./account/login-form/login-form.component";
import { RegistrationFormComponent } from "./account/registration-form/registration-form.component";
import { UserService } from "./services/Authorization/user.service";
import { ConfigService } from "./shared/utils/config.service";

import { MessageService } from "./services/Authorization/message.service";
import { AuthGuard } from "./account/auth.guard";
import { ServerBusyService } from "./services/serverBusy.service";
import { CoolStorageModule } from "angular2-cool-storage";
import { TranslateStore } from "@ngx-translate/core/src/translate.store";


export function HttpLoaderFactory(http: HttpClient, baseHref: any) {
    if (baseHref === null && typeof window !== 'undefined') {
        baseHref = window.location.origin;
    }
    //return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
}

@NgModule({
    declarations: [
        AppComponent,
        .
        .
        .
    ],
    imports: [
        HttpClientModule,
        CommonModule,
        CoolStorageModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'home-help', component: HelpHomeComponent, canActivate: [AuthGuard] },
            { path: 'steps', component: StepsComponent, canActivate: [AuthGuard] },
            { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
            { path: 'dashboard-help', component: HelpDashboardComponent, canActivate: [AuthGuard] },

            { path: 'login', component: LoginFormComponent },
            { path: 'register', component: RegistrationFormComponent, canActivate: [AuthGuard] },

            { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
            { path: 'add-user', component: AddUserComponent, canActivate: [AuthGuard] },
            { path: 'add-user-help', component: HelpAddUserComponent, canActivate: [AuthGuard] }, 
            { path: 'view-user/:username', component: ViewUserComponent, canActivate: [AuthGuard] },



            { path: 'add-afmStatementIdentifiers', component: AddAfmStatementIdentifiersComponent, canActivate: [AuthGuard] },

            { path: '**', redirectTo: 'home' }
        ]),
        BrowserModule,
        //TranslateModule.forRoot({
        //    loader: {
        //        provide: TranslateLoader,
        //        useFactory: HttpLoaderFactory,
        //        deps: [HttpClient, [ORIGIN_URL]]
        //    }
        //})
    ],
    providers: [
        PlatformRef,
        ConfigService,
        CompanyService,

        MessageService,
        AuthGuard,
        ServerBusyService,
        UserService,
        //TranslateService,
        //TranslateStore 
    ]
})

export class AppModuleShared {
}

boot.browser.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.module';
import { AppComponent } from './components/app/app.component';
import { ORIGIN_URL } from "./constansts/baseurl.constants";
import { UserService } from "./services/Authorization/user.service";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserPrebootModule } from 'preboot/browser';

export function getOriginUrl() {
    return window.location.origin;
}


@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserPrebootModule.replayEvents(),
        BrowserAnimationsModule,
        AppModuleShared
    ],
    providers: [
        {
            // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
            // (Also remember the Server requires Absolute URLs)
            provide: ORIGIN_URL,
            useFactory: (getOriginUrl)
        },
        {
            provide: 'BASE_URL',
            useFactory: getBaseUrl
        },
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.browser';

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app');
        const newRootElem = document.createElement('app');
        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

boot.server.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModuleShared } from './app.module';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule,
        AppModuleShared
    ]
})
export class AppModule {
}

import 'reflect-metadata';
import 'zone.js';
import 'rxjs/add/operator/first';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppModule } from './app/app.module.server';


import { ORIGIN_URL } from './app/constansts/baseurl.constants';

enableProdMode();

export default createServerRenderer(params => {
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
        { provide: ORIGIN_URL, useValue: params.origin }
    ];

    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
        const state = moduleRef.injector.get(PlatformState);
        const zone = moduleRef.injector.get(NgZone);

        return new Promise<RenderResult>((resolve, reject) => {
            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
            appRef.isStable.first(isStable => isStable).subscribe(() => {
                // Because 'onStable' fires before 'onError', we have to delay slightly before
                // completing the request in case there's an error to report
                setImmediate(() => {
                    resolve({
                        html: state.renderToString()
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

我真的不知道会有什么问题

我读了这篇文章：

• 我删除了node_modules文件夹并安装了npm
• 不久前我搬到了webpack，所以我认为这不是问题所在
• 我在解决方案中搜索了“HTTP_提供者”，在“vendor.js”和“main server.js”中得到了结果，但在我的代码中没有

谢谢大家!

---

另外，我升级到Angular 5的原因是，当我有Angular 4时，我无法发布到Azure，因为我收到了一个错误，即webpack退出时出现了错误代码2，我在另一篇帖子上读到，升级到Angular 5的人再也得不到它。

在您的项目中禁用SSR。启用SSR时，当前项目配置将无法进行树形显示。该团队正在开发一个新模板以使其正常工作。看看Steve Sanderson的评论-我改变了加载。。。要加载。。。不做任何更改…尝试编辑boot.server.ts；更改为：

const zone=moduleRef.injector.get（NgZone）至
恒定区：NgZone=moduleRef.injector.get（NgZone）；看见