标签: angular-module

我创建了一个自定义angular2(5.0.x)模块,如下所示:

import { GuageService } from './services/guage.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuageComponent } from './guage/guage.component';

@NgModule({
  declarations: [GuageComponent],

  imports: [
    CommonModule
  ],

  providers : [GuageService],
  exports : [GuageComponent]
})
export class GuageModule {}

我在我的app模块中使用它,如下所示:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '@kronsbi/bi-module-template';
import { HttpClientModule } from '@angular/common/http';


    import { AppComponent } from …

问题是我在forRoot方法中调用了一个函数,如下所示:

app.module.ts

import {environment} from '../environments/environment';

...

@NgModule({
  imports: [
    BrowserModule,
    MyModule.forRoot({
      config: {
        sentryURL: environment.SENTRY_URL <-- This, calls the function
      }
    }),
    HttpClientModule,
    ...
 ]})

environemnt.ts

export function loadJSON(filePath) {
  const json = loadTextFileAjaxSync(filePath, 'application/json');
  return JSON.parse(json);
}

export function loadTextFileAjaxSync(filePath, mimeType) {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', filePath, false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status === 200) {
    return xmlhttp.responseText;
  } else {
    return null;
  }
}

export const …

当我建立我的角度库，将其发布到NPM，并用它作为另一个项目的依赖，每当我试图导入我的模块类的就成我的app.module.ts，并得到这个错误Class TekButtonModule is not an Angular module。我遵循了来自多个不同站点的有关如何创建、构建和发布 Angular 库的步骤，但我无法弄清楚为什么它不会将该类识别为有效的模块类。

在我的 app.module.ts 中，这是我导入模块的方式：

import { TekButtonModule } from "tek-angular-uimodules";

@NgModule({
    imports: [
        TekButtonModule
    ]
})
export class AppModule { }

我的库项目遵循 Angular 概述的标准目录结构。设置库项目时，我没有对构建或路径设置进行任何更改。我构建的库项目有一个bundles, esm5, esm2015, fesm5, fesm2015, lib（我的自定义模块和组件所在的位置），以及一个package.json, public-api.d.ts（导出 lib 目录中的所有内容）、README.md、tek-angular-uimodules.d.ts（导出公共 api）和一个tek-angular-uimodules.metadata.json文件。

是否有一些默认情况下未设置的额外配置才能使模块正常工作？

这是我的按钮模块类：

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { TekButton } from …

我使用 angular 9 并且我想做延迟加载 app-routing

{
    path: '', loadChildren: () => import("./components/login/login.module")//.then(m =>
     // m.LoginModule)
  }

在我创建登录模块之后：

@NgModule({
    declarations: [LoginComponent],
    imports: [
        CommonModule,
        FormsModule,
        LoginModuleRouting

    ],
    providers:[]
})
export class LoginModule { }

和路由：

const routes: Routes = [
  {
    path: '', component: LoginComponent,

  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})


export class LoginModuleRouting { }

问题是，当我打电话ng serve并继续访问 ` http://localhost:4200/ 时，我得到了这个异常：

core.js:6237

 ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: NgModule '[object Module]' is not a …

我们为什么要费心使用import { DOCUMENT } from '@angular/common'？

即使没有它，我也可以访问文档模块

document.getElementById('TestID).focus()

我在导入中看到的唯一区别是将其附加到this关键字。

this._document.getElementById('TestID').focus();

从 Angular 的通用模块导入 DOCUMENT 有什么真正的好处吗？

我做了一些研究，但看不到任何关于此的信息。

错误

compiler.js:215未捕获错误:模板解析错误:无法绑定到'ngbCollapse',因为它不是'div'的已知属性.( "] [ngbCollapse] =" 是否隐藏">

我有一个NavbarComponent和一个FooterComponent,我想进入SharedModule,以保持根app.module更清洁.

app.module

import { AdminComponent } from './admin/admin.component';
// import { NavbarComponent } from './navbar/navbar.component';
// import { FooterComponent } from './footer/footer.component';

// Modules
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    PasswordResetComponent,
    ResetPasswordComponent,
    AdminComponent,
    // NavbarComponent,
    // FooterComponent,

share.module

但是,一旦我将这些组件移动到这里,并正确更新其路径./- > ../应用程序中断.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NavbarComponent } from '../navbar/navbar.component'; …

我正在尝试实现通配符模块,我似乎没有得到它的工作:

现在我有以下代码可行:

typings.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as es from './i18n/es.json';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  hello = '-';

  ngOnInit() {
    this.hello = es.default.hello;
  }
}

您可能会看到一个活生生的例子在这里,但是我想实现通配符,因为看到这里(typescriptlang)和这里(SitePen接触):

实现应该允许我做这样的事情:

typings.d.ts

declare module "*.json!i18n" {
  const value: any;
  export default value;
}

declare module "*.json!static" { …

我是角度的新手，

开始编写我的第一个库，包含组件、服务、指令。

我在库的exports数组中列出了我的组件、服务、指令，但仍然：

• 当使用来自另一个库或应用程序的库并成功编译时，我需要在public-api.ts. 为什么 ？ngModule 的 exports数组还不够吗？

• 现在从exports数组中删除了组件、服务、指令，一切仍然有效。为什么 ？

阅读 angular.io 上的文档，它看起来public-api.ts和exports服务于相同的目的 - 我可能在这里遗漏了一些基本的东西。

我想在我的应用程序中有一条路线，我可以在其中列出应用程序中的所有现有路线。我在 Angular 9 中使用 Ivy 并使用动态导入进行延迟加载。

该应用程序有一些延迟加载的模块。该路由将在根模块中声明。但是此时router.config只包含“根”路由，而懒惰的路由有一个 loadChildren()` 方法，可以动态导入模块。

我尝试过这样的事情：角度 8 中的延迟加载模块，但无法使其适用于路线。路由器实例似乎没有更新。

查看路由器的源代码，我已经成功加载了lazy模块并使用configLoader的load方法获取了子路由

(<any> this.router).configLoader.load(this.injector, route).subscribe({
  next: (moduleConf) => {
    children.push(...moduleConf.routes.map((childRoute) => childRoute.path));
  }
})

它运行良好，但我使用了 的configLoader属性，Router它是一个私有属性。所以这对未来来说不是一个好主意:)

我制作了一个堆栈闪电战，您可以在其中查看/测试代码。该组件还有一个loadConfOld()方法，该方法尝试使用moduleFactory.

我怎样才能以适当和持久的方式做我想做的事？预先感谢您的帮助。

现在,使用Angular v5,同时使用延迟加载,我加载app.module.ts我认为不是最佳策略的所有提供者,因为这不会加快我的应用程序启动时间,特别是因为我有50个自定义的东西提供者(不要评判我;)).

因此,我问我自己是否应该为我的所有应用程序加载所有这些应用程序,或者我是否应该只在我只使用它们的地方加载它们？

我猜测只在我真正使用它们的地方加载提供商会更好.

但在这种情况下,对我而言根本不清楚如何解决以下构造:

假设我有三个页面(A,B和C),它们有自己的模块和三个提供程序(1,2和3).

A use 1
B use 1, 2, 3
C use 1, 2

• 我想,因为1是在所有应用程序中使用,我将不得不声明它 app.module.ts

• 由于3只在B​​页中使用,我想我只需要声明它 B.module.ts

• 但是2呢？我怎么能在两者中声明它B.module.ts并且C.module.ts目标是共享相同的提供者"内存"(如果提供者包含一个值,B和C应该看到相同的对象),我将分别如何编码？只需通过"像往常一样"注入提供者并完成剩下的角度吗？

提前获得任何帮助,真的很感激

UPDATE

不确定我是否正确理解了角度文档,但这是目标,应该为所有应用程序加载提供程序吗？

看到

https://angular.io/guide/ngmodule-faq#q-component-scoped-providers

更新2018年

注入策略随着Angular v6的引入而发展.根据文档,可以providedIn指定应该使用服务的模块.请参阅https://angular.io/guide/dependency-injection