Question

在我的tsconsig文件中，我声明了文件夹的路径

"@somellc/application-layout": [ "modules/somellc-frontend-application-layout" ]

，并在提到的文件夹的索引文件中导出2个模块

    export {StoreLayoutModule} from './store/store-operations.module';
    export {FrontRegisterModule} from './front-register/front-register.module';

in my main core module I'm referring to those exported modules after checking with authguard service if the user is logged in. Please Note that in my particular case the absolute path for used modules doesn't work for me so I need to use the path declared in the tsconfig file 

   export const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuardService],
        canActivateChild: [AuthGuardService],
        canLoad: [AuthGuardService],
        children: [
            {
                path: '',
                loadChildren: '@somellc/application-layout#StoreLayoutModule',
            },
            {
                path: 'front-register',
                loadChildren: '@somellc/application-layout#FrontRegisterModule',
            },
        ]
    },
    {
        path: 'login',
        component: LoginComponent
    }
];

因此在应用程序构建过程中，我没有看到任何错误，但是在浏览器中，我收到了这样的错误：找不到这样的模块之一

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot find 'StoreLayoutModule' in '@somellc/application-layout',

在删除所有模块之一后，一切正常，那么有人可以帮助我解决这个问题吗？

Answer 1

尝试从./app/somellc-fronent-application-layout.ts之类的根目录访问模块，（带有 .ts 后缀）可以解决此问题：）

编辑：好吧，我的坏蛋显然我对自己的解释不够充分。

首先是一个模块的代码片段，它将用一个简单的组件延迟加载（这里有趣，这里只是一个带有简单组件的普通模块）

import { NgModule, Component } from '@angular/core';
import { RouterModule } from '@angular/router';


@Component({
    template: '<h1>Lazy loaded component</h1>'
})
class LazyComponent { }


@NgModule({
    declarations: [LazyComponent],
    imports: [
        RouterModule.forChild(
            [{
                path: '',
                component: LazyComponent
            }]
        )
    ]
})
export class LazyModule { }

该应用模块的当前代码段

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    RouterModule,
    AppRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在出现了有趣的部分，就像您在引用文档的注释中所指出的那样，通过使用模块的路径，我们希望延迟加载后缀＃{ yourModuleHere} 。如您所见，我正在加载whatever#LazyModule，其中任何内容都不像是模块的路径（在您的情况下为“ @ somellc / application-layout”）。魔术发生在最后一个片段中。

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../components/home/home.component'; //<= this is just a placeholder component
import { NgModule } from '@angular/core';

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: 'demo', loadChildren: 'whatever#LazyModule' }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            routes
        )
    ]
})

export class AppRouterModule { }

另一个重要/有趣和强制性的事情发生在tsconfig.json中。在这里，如果要通过别名访问特定路径，则必须在配置中写入完整的路径名（在我们的示例中包括文件后缀 .ts ）

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "baseUrl": "src",
    "paths": {
      "whatever": [
        "./app/lazy-folder/lazy.module.ts"
      ]
    },
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

延迟加载多个模块

1 个答案: