标签: angular-standalone-components

我目前正在开发一个使用独立组件的 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,
                },
            ],
        };
    }
}

在我的主应用程序中，我将库导入到我的main.ts文件中，如下所示：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});

但是，当我尝试使用库中的组件时遇到问题：

• 如果我在主应用程序内但在 之外使用库组件<router-outlet></router-outlet>，则一切都会按预期工作。
• 如果我在 中路由的组件中使用我的库中的相同组件<router-outlet></router-outlet>，我就会遇到问题。组件显示正确，但离开页面时，路由器无法从页面中删除该组件。此外，控制台中不会显示任何错误。

以下是我在独立组件中导入 UiLibModule 的方法：

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]

.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作，而使用的库则遇到了上述问题。

我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说，我很好奇是否有一种方法可以通过独立组件直接添加环境。

此外，我不确定是否需要在独立组件中再次声明环境，因为它已经在 …

我有一个问题，我想重写我的应用程序代码并将主模块更改为 main.ts 中指向的主根独立组件。

一切正常，但我对 HttpClientModule 有问题。我在 root 中提供的一项服务中使用 HttpClient。在 MainComponent 中，我将 HttpClientModules 添加到导入数组中，但随后出现错误，表示我没有向应用程序提供 HttpClientMoudle，并且此服务无法使用它。

Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[MainComponent])[MainService -> MainService -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!

当我将此 HttpClientModule 添加到 AppRoutingModule 时，我也将其添加到 main.ts 中

bootstrapApplication(MainComponent, {
  providers: [importProvidersFrom(RoutingModule)],
});

效果很好，服务没有任何问题。

这是包含此问题的基本示例的代码，有人可以解释为什么导入到根独立组件在这种情况下不起作用，但导入到 RoutngModule 可以解决问题吗？

https://stackblitz.com/edit/angular-fhpbvm?file=src/main.ts

是否可以在独立组件中使用 Ngxs？我尝试NgxsModule通过以下方式导入：

@Component({
  ...
  imports: [
    ...
    NgxsModule.forFeature([MyState]),
...

和

@Component({
  ...
  imports: [
    ...
    NgxsModule.forRoot([MyState]),
...

但两者都给我以下错误消息：（Type 'ModuleWithProviders<NgxsFeatureModule>' is not assignable to type 'any[] | Type<any>'或NgxsRootModule在这种forRoot情况下）。还提供了更深入的错误消息：'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

这是否受支持，但我的语法错误？或者这是不支持的？如果不支持，拦截器是什么？

我正在将角度应用程序迁移到standalone component. 删除了ngModule和app.module.ts文件

主要.ts

bootstrapApplication(AppComponent,{\n  providers:[importProvidersFrom(FalconCoreModule.forRoot(environment)),\n             importProvidersFrom(RouterModule.forRoot(routes))]\n}).catch(err => console.error(err));\n

应用程序组件.scss

@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  standalone: true,\n  imports:[RouterModule,FalconCoreModule]\n})\nexport class AppComponent {}\n

自动完成.component.ts

@Component({\n  selector: 'app-auto-complete',\n  templateUrl: './auto-complete.component.html',\n  styleUrls: ['./auto-complete.component.scss'],\n  standalone: true,\n  imports:[FalconCoreModule,CodeGeneratorComponent,HighlightModule,CodeButtonComponent]\n})\nexport class AutoCompleteComponent\n  extends BaseFormComponent<string>\n  implements OnInit {}\n

错误

core.mjs:9229 ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:\n  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.\n  - There …

我正在使用带有独立组件的 Angular v16。我像在基于 NgModule 的项目中一样实现了 InMemoryWebAPI，但它似乎不起作用。我不断得到404 not found。

有人尝试过这个并通过独立引导成功使用 InMemoryWebAPI 吗？为了让它与独立组件一起工作，我还需要做其他什么不同的事情吗？

这是我的 app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(InMemoryWebApiModule.forRoot(AppData, { delay: 1000 })),
    provideHttpClient(),
    provideRouter(routes, withComponentInputBinding())
  ]
};

这是我的应用程序数据

export class AppData implements InMemoryDbService {

  createDb(): { products: Product[] } {
    const products = ProductData.products;
    console.log(products);
    return { products };
  }

}

这是我的服务：

  private sub = this.#http.get<Product[]>('api/products')

感谢您的任何想法或调试技巧。

编辑：我在这里有一个 stackblitz：https ://stackblitz.com/edit/github-crud-signals-djk

该服务当前已注释掉 http 调用，因为它们生成 404 错误。相反，它对数据进行硬编码。

我将我的 Angular 项目更新为 Angular 14。现在我想要一些standalone components，，pipes或者directives。

我有一个名为ProductModule的特色模块，并且希望在此模块中使用名为uppercase的独立管道。

// structure
---Product
          ---product.component
          ---product.service
          ---product.module.ts

---StandabloneFolder
                    ---uppercase.pipe.ts

我的大写管子

@Pipe({
    name: 'uppercase',
    standalone: true,
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return "UPPERCASE_INPUT"
    }
}

在product.component.html中

{{'Javascript Addicted' |uppercase}}

出现以下错误：

找不到名称为“大写”的管道product.component.ts(6, 39)：组件 ProductComponent 的模板中发生错误。

笔记：

standalone: true如果我添加到Product.Component并从声明数组中删除ProductComponent，这个问题就会得到解决。