即使我在 app.module.ts 中有 AppRoutingModule，构建失败并出现错误“'router-outlet' 是一个 Angular 组件，然后验证它是否是该模块的一部分。” 我观察到一种奇怪的行为，这是因为 IVY 和 AOT 启用了，如果其中一个被禁用，它正在工作
这是我的 app.module
import {ErrorHandler, Injectable, NgModule, APP_INITIALIZER} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
// import {saveAs} from 'file-saver/FileSaver';
import * as Raven from 'raven-js';
import {CookieModule} from 'ngx-cookie';
import {AppComponent} from './app.component';
import {AppConfig} from './app.config';
import {environment} from '../environments/environment';
import {GlobalErrorHandler} from './app.eror-handler';
import 'hammerjs';
import {SharedModule} from './shared/shared.module';
import {AuthModule} from './auth/auth.module';
import {LandingModule} from './landing/landing.module';
import {AppRoutingModule} from './app-routing.module';
import {ReferralsModule} from './referrals/referrals.module';
import {AppInterceptor} from "./app.interceptor";
import {WebStorageModule} from "ngx-store";
import {AppConfigService} from './shared/app-config.service';
import {ProfileSharedModule} from "./profiles/profile.module";
if (AppConfig.ENVIRONMENT === 'stage' || AppConfig.ENVIRONMENT === 'production') {
Raven
.config(AppConfig.RAVEN_URL).install();
}
export function appConfigServiceFactory(appConfigService: AppConfigService): Function {
return () => appConfigService.getConfig();
}
@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any>{
'swipe': {velocity: 0.3, threshold: 10}
};
}
@Injectable()
export class RavenErrorHandler implements ErrorHandler {
handleError(err: any): void {
if (AppConfig.ENVIRONMENT === 'stage' || AppConfig.ENVIRONMENT === 'production') {
Raven.captureException(err.originalError);
} else {
console.error(err);
}
}
}
@NgModule({
imports: [
BrowserAnimationsModule,
BrowserModule.withServerTransition({appId: 'startupbyte-app'}),
CookieModule.forRoot(),
FormsModule,
ReactiveFormsModule,
HttpClientModule,
CommonModule,
AppRoutingModule,
SharedModule,
AuthModule,
LandingModule,
WebStorageModule,
ProfileSharedModule,
ReferralsModule,
],
declarations: [
AppComponent,
],
bootstrap: [AppComponent],
providers: [
Ng4TwitterTimelineService,
AppConfigService,
{
// Provider for APP_INITIALIZER
provide: APP_INITIALIZER,
useFactory: appConfigServiceFactory,
deps: [AppConfigService],
multi: true
},
// {provide: RouteReuseStrategy, useClass: CustomReuseStrategy},,
{
provide: ErrorHandler,
useClass: GlobalErrorHandler
},
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
},
{
provide: HTTP_INTERCEPTORS,
useClass: AppInterceptor,
multi: true
}
]
})
export class AppModule {
}
这是 app-routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthRoutes} from './auth/auth.routes';
import {landingRoutes} from './landing/landing.routes';
import {homeRoutes} from './home/home.routes';
import {WhiteLabelRoutes} from './whitelabel-base/whitelabel-base.routes';
import {AuthGuard} from './auth/auth.guard';
import {MyGroupsListComponent} from './groups/my-groups-list/my-groups-list.component';
import {AnonymousGuard} from "./auth/anonymous.guard";
import {FeatureAccessGuard} from './shared/guards/feature-access.guard';
import {VisibilityGuard} from './shared/guards/visibility.guard';
const routes: Routes = [
{
path: '',
canActivate: [VisibilityGuard],
children: [
{
path: 'topics',
canActivate: [AuthGuard],
loadChildren: () => import('app/topics/topic.module').then(m => m.TopicModule)
},
{
path: 'splash',
canActivate: [AnonymousGuard],
loadChildren: () => import('app/splash/splash.module').then(m => m.SplashModule)
},
{
path: 'onboarding',
canActivate: [AuthGuard],
loadChildren: () => import('app/onboarding/onboarding.module').then(m => m.OnboardingModule)
},
{
path: 'orgs',
canLoad: [FeatureAccessGuard],
canActivate: [AuthGuard],
loadChildren: () => import('app/orgs/org.module').then(m => m.OrgModule),
data: {
permissionType: 'view',
feature: 'orgs'
}
},
{
path: 'articles',
canLoad: [FeatureAccessGuard],
loadChildren: () => import('app/articles/articles.module').then(m => m.ArticlesModule),
data: {
permissionType: 'view',
feature: 'articles'
}
},
{
path: 'ebooks',
loadChildren: () => import('app/articles/ebooks-list/ebooks.module').then(m => m.EbooksModule)
},
{
path: 'conversations',
canActivate: [AuthGuard],
loadChildren: () => import('app/conversations/conversation.module').then(m => m.ConversationModule)
},
{
path: 'content',
loadChildren: () => import('app/content/content.module').then(m => m.ContentModule),
},
{
path: 'dashboard',
canActivate: [AuthGuard],
loadChildren: () => import('app/dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
path: 'profiles',
canLoad: [FeatureAccessGuard],
canActivate: [AuthGuard],
loadChildren: () => import('app/profiles/profile.module').then(m => m.ProfileModule),
data: {
permissionType: 'view',
feature: 'profiles'
}
},
{
path: 'programs',
loadChildren: () => import('app/programs/programs.module').then(m => m.ProgramsModule),
},
{
path: 'events',
canLoad: [FeatureAccessGuard],
canActivate: [AuthGuard],
loadChildren: () => import('app/events/event.module').then(m => m.EventModule),
data: {
permissionType: 'view',
feature: 'events'
}
},
{
path: 'my_credits',
loadChildren: () => import('app/referrals/my-rewards/my-rewards.module').then(m => m.MyRewardsModule)
},
{
path: 'amas',
canActivate: [AuthGuard],
redirectTo: 'events'
},
// to be removed
{
path: 'launches',
canLoad: [FeatureAccessGuard],
canActivate: [AuthGuard],
loadChildren: () => import('app/launches/launches.module').then(m => m.LaunchesModule),
data: {
permissionType: 'view',
feature: 'launches'
}
},
// to be removed
{
path: 'ideas',
canLoad: [FeatureAccessGuard],
canActivate: [AuthGuard],
loadChildren: () => import('app/ideas/ideas.module').then(m => m.IdeasModule),
data: {
permissionType: 'view',
feature: 'ideas'
}
},
{
path: 'subscriptions',
canActivate: [AuthGuard],
loadChildren: () => import('app/subscriptions/subscriptions.module').then(m => m.SubscriptionsModule)
},
{
path: 'story',
loadChildren: () => import('app/stories/stories.module').then(m => m.StoriesModule)
},
{
path: 'polls',
loadChildren: () => import('app/polls/polls.module').then(m => m.PollsModule)
},
{
path: 'notifications',
canActivate: [AuthGuard],
loadChildren: () => import('app/activity/activity.module').then(m => m.ActivityModule)
},
{
path: 'communities',
redirectTo: 'groups'
},
{
path: 'groups',
canLoad: [FeatureAccessGuard],
loadChildren: () => import('app/groups/groups.module').then(m => m.GroupsModule),
data: {
permissionType: 'view',
feature: 'groups',
}
},
{
path: 'jobs',
canActivate: [AuthGuard],
loadChildren: () => import('app/jobs/jobs.module').then(m => m.JobsModule)
},
{
path: 'deals',
canLoad: [FeatureAccessGuard],
loadChildren: () => import('app/deals/deals.module').then(m => m.DealsModule),
data: {
permissionType: 'view',
feature: 'deals',
}
},
{
path: 'collections',
canActivate: [AuthGuard],
loadChildren: () => import('app/collections/collections.module').then(m => m.CollectionsModule)
},
{
path: 'marketing',
loadChildren: () => import('app/marketing/marketing.module').then(m => m.MarketingModule)
},
{
path: 'preferences',
loadChildren: () => import('app/preferences/preferences.module').then(m => m.PreferencesModule)
},
{
path: 'brands',
loadChildren: () => import('app/brand-pages/brand-pages.module').then(m => m.BrandPagesModule)
},
{
path: 'community-settings',
loadChildren: () => import('app/workspaces/workspaces.module').then(m => m.WorkspacesModule)
},
{
path: 'features',
// canActivate: [],
loadChildren: () => import('app/features/features.module').then(m => m.FeaturesModule)
},
{
path: 'solutions',
// canActivate: [],
loadChildren: () => import('app/solutions/solutions.module').then(m => m.SolutionsModule)
},
{
path: 'addons',
// canActivate: [],
loadChildren: () => import('app/addons/addons.module').then(m => m.AddonsModule)
},
{
path: 'resources',
loadChildren: () => import('app/resources/resources.module').then(m => m.ResourcesModule)
},
{
path: 'affiliate-landing',
loadChildren: () => import('app/workspaces/affiliate-landing/affiliate-landing.module').then(m => m.AffiliateLandingModule)
},
{
path: 'pricing',
// canActivate: [],
loadChildren: () => import('app/prices/prices.module').then(m => m.PricesModule)
},
{
path: 'use-cases',
loadChildren: () => import('app/workspaces/landing/use-cases/use-cases.module').then(m => m.UseCasesModule)
},
{
path: 'platform',
loadChildren: () => import('app/workspaces/landing/platform/platform.module').then(m => m.PlatformModule)
},
{
path: 'create-trial-workspace',
loadChildren: () => import('app/workspaces/free-trial-form/free-trial-form.module').then(m => m.FreeTrialFormModule)
},
{
path: 'verification',
loadChildren: () => import('app/workspaces/verify-email-dialog/verify-email.module').then(m => m.VerifyEmailModule)
},
...WhiteLabelRoutes,
...AuthRoutes,
...landingRoutes,
...homeRoutes,
{path: '**', redirectTo: '404'}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {paramsInheritanceStrategy: 'always', scrollPositionRestoration: 'enabled'})],
exports: [RouterModule],
declarations: [],
providers: []
})
export class AppRoutingModule {
}
构建失败并出现此错误
src/app/app.component.html:8:5 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
8 <router-outlet></router-outlet>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:32:16
32 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.