我目前正在开发一个使用独立组件的 Angular 应用程序(版本 16.1.3)。该应用程序还依赖于使用 NgModules 的 Angular 库。我正在尝试将此库中的组件导入到我的应用程序中,其中该库还包含一个从应用程序中检索环境数据的函数。
这是ui-lib.module.ts图书馆的
export class UiLibModule {
public static forRoot(environment: any): ModuleWithProviders<UiLibModule> {
return {
ngModule: UiLibModule,
providers: [
{
provide: 'environment',
useValue: environment,
},
],
};
}
}
Run Code Online (Sandbox Code Playgroud)
在我的主应用程序中,我将库导入到我的main.ts文件中,如下所示:
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(
...
UiLibModule.forRoot(environment),
...)
]
...});
Run Code Online (Sandbox Code Playgroud)
但是,当我尝试使用库中的组件时遇到问题:
<router-outlet></router-outlet>,则一切都会按预期工作。<router-outlet></router-outlet>,我就会遇到问题。组件显示正确,但离开页面时,路由器无法从页面中删除该组件。此外,控制台中不会显示任何错误。以下是我在独立组件中导入 UiLibModule 的方法:
...
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
imports: [
UiLibModule
]
Run Code Online (Sandbox Code Playgroud)
.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作,而使用的库则遇到了上述问题。
我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说,我很好奇是否有一种方法可以通过独立组件直接添加环境。
此外,我不确定是否需要在独立组件中再次声明环境,因为它已经在 …
ng-modules angular angular-router angular-library angular-standalone-components
每个人。我注意到 Angular 17 默认为独立模式,这意味着它不会自动生成文件 app.module.ts...下面的代码在独立模式下生成 Angular 应用程序:
ng new project-name
Run Code Online (Sandbox Code Playgroud)
下面的代码在非独立模式下生成一个角度应用程序:
ng new project-name --no-standalone
Run Code Online (Sandbox Code Playgroud)
但是,如果我正在使用这个新的独立版本,有人可以指导我使用哪个文件以及如何导入之前在 app.module.ts 文件中导入的模块吗?
举个例子:如果我想从@angular/platform-browser导入模块BrowserModule,我是否必须将其导入到将在组件装饰器中使用它的所有组件中?因为之前,我需要仅在 app.module.ts 处导入。或者我在这里遗漏了什么?