标签: angular-module

嘿所以我有一个非常奇怪的问题,我在设置角度路由之前没有遇到过,当我试图延迟加载另一个模块时,我不断收到此错误 Error: Cannot find module "app/feed/feed.module"

从这里开始是我的设置

• @ angular/cli:6.0.1
• @ angular/core:6.0.0
• @ angular/material:6.0.1
• npm:6.0.1
• 节点:10.1.0

另外需要注意的是,我刚刚更新了所有的全局npm软件包后生成了一个新的角度项目,因此列出的内容在我运行之前已经更新到了 ng new app-name

这是我的app-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后app.module我在上面导入这个模块:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ], …

app.module.ts通过在下面添加条目导入模块,

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent,
    FilterPipe,
    LoggingService
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})

但是RouterModule直接用于../src/app/app.routes.ts,如下所示,

import {Routes, RouterModule} from "@angular/router";
export const routes:Routes = [
    /* Each route will be an object {}*/
    {path: 'directory', component: DirectoryComponent},
    {path: '',          component: HomeComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

没有进入RouterModule在@NgModule(imports: [..]).

1)导入角度模块有不同的方法吗？

2)角度模块的导入是否与打字稿模块的导入不同？

我正在我的 Angular 6 应用程序中实现延迟加载的功能模块，并已成功为“发票”功能配置一个模块，但在为延迟加载的“费用”和“联系人”功能模块实现路由时遇到问题，它们的设置方式与第一个相同。

每个模块都已导入到 AppModule 中，并且它们还使用 SharedModule，我已将其导入到 AppModule 和每个功能模块中。

使用“费用”或“联系人”模块路由到任何页面时，我在控制台中收到以下错误：

错误错误：未捕获（承诺中）：错误：RouterModule.forRoot() 调用了两次。延迟加载模块应使用 RouterModule.forChild() 代替。错误：RouterModule.forRoot() 调用了两次。延迟加载模块应使用 RouterModule.forChild() 代替。在 ProvideForRootGuard (vendor.js:106249)

我正在使用 .forChild(routes) 作为功能模块，但我能想到的唯一可能导致此问题的原因是过程中某个地方的混乱导入。根据之前关于其他人遇到此问题的问题，我检查了 AppModule 是否已导入到任何其他模块中，从而导致 forRoot() 被调用两次，但事实并非如此。

由于错误表明与provideForRootGuard有关，我认为这可能与将CanActivateRootGuard导入到每个模块有关，但删除它也没有解决问题。

应用路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouterLinkActive } from '@angular/router';
import { CanActivateRouteGuard } from './can-activate-route.guard';

// COMPONENTS
  // Dashboard
  import { DashboardComponent } from './dashboard/dashboard.component';
  // Login
  import { LoginComponent } from './login/login.component';
  // Register
  import { RegisterComponent } from './register/register.component';
  // Notifications
  import …

问题

cannot find module如果遵循结构，我们会得到一个错误。

app-routing.module.ts

const routes: Routes = [
  {
    path: CHILD_MANAGEMENT_PORTAL.baseUrl,
    canActivate: [AuthGuard],
    component: EnvelopeComponent,
    loadChildren: () =>
      import('./features/child-management/child-management.module').then(
        m => m.ChildManagementModule
      ),
    data: {
      menuResolver: ChildManagementMenuResolver,
      pageTitleResolver: ChildManagementPageTitleResolver,
      portalData: CHILD_MANAGEMENT_PORTAL
    }
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

child-management-routing.module.ts : 错误

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboard/child-dashboard.module#ChildDashboardModule'
  },
  {
    path: '**',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SalesArrangementManagementRoutingModule {} …

我有一个听起来可能很愚蠢的场景，但是我被困住了，试图理解是什么导致了它不起作用。

我有一个现在有三个模块的角度应用程序

var app = angular.module('mainApp', ['ngRoute']); //parent module
var reviewModule = angular.module('reviewModule', ['mainApp']);  //child 1
var searchmodule = angular.module('searchmodule', ['mainApp']);  //child 2

我已经在我的父模块（即mainApp）中设置了一些配置和默认字符串，我希望在其所有子模块中使用它。

另一方面，我的reviewModule和searchmodule（子模块）具有单独的控制器和服务，这些控制器和服务在不同的路线上使用。现在，问题来了，当我想将一个模块的服务用于另一个模块时，例如，如果我执行以下操作

var searchmodule = angular.module('searchmodule', ['mainApp', 'reviewModule']);

在我的搜索模块控制器中使用reviewModule服务时，出现一个异常提示

Error: $injector:modulerr Module Error
Failed to instantiate module searchmodule

两个子模块都具有相同的父模块，我想将一个子模块用于另一个子模块，并且不明白为什么会收到此异常。

更新：

我什至尝试使用以下行进行模块声明

var searchmodule = angular.module('searchmodule', ['reviewModule']);

但这也会引起异常。

我有一个用于生成令牌的自定义服务,在这个服务中我需要使用MD5功能,MD5功能在模块中 angular-md5

这是我的服务代码,角度模块generate_token使用的函数md5.createhash()但是我得到了错误:TypeError: Cannot read property 'createHash' of undefined

我想我做错了但我看不清楚

angular.module('app.services', ['angular-md5'])

.service('Auth', [function($scope, md5){
    var self = this;

    this.rand_alphanumeric = function() {
        var subsets = [];
        subsets[0] = [48, 57]; // ascii digits
        subsets[1] = [65, 90]; // ascii uppercase English letters
        subsets[2] = [97, 122]; // ascii lowercase English letters 

        // random choice between lowercase, uppercase, and digits
        s = Math.floor(Math.random() * 2) + 0
        ascii_code = Math.floor(Math.random() * (subsets[s][1] - subsets[s][0] + …

自从挖掘角度依赖注入(DI)的前几个基本级别,并且击中了用于Root()的gem之后,我一直想知道实际使用它的最佳实践是什么.

我偶然发现了这种方法,同时寻找一种允许延迟加载模块访问根上下文中的服务的方法,允许在两个模块之间共享数据流,其中一个或两个模块可能是延迟加载的.从那以后我想知道,你可以为共享模块中的所有内容使用forRoot()并在整个应用程序中保存大量的import语句吗？捕获量是多少？是否存在某些易于用于root的东西,以及其他不容易使用的东西？或者是root用于主要用于桥接延迟加载模块时桥接上述DI上下文问题？

基本上我现在有以下 Angular 模块：

1. landing
2. admin
3. core
4. shared

我想要的是注册一个在模块AuthenticationGuard内调用的新守卫shared，并在不同的模块中提供它。

目前，只有当我在landing-module( 这是我引导的) 中注册守卫时，它才起作用，而如果我在 或 中注册它，它也admin.module不起作用shared.module。

如果我这样做，我会收到一条错误消息，内容如下：

注册guard是通过providers相应模块的数组完成的。

我的目标是能够在所有模块中使用它。

core从模块内注入服务没有问题- 所以我认为两者admin之间一定存在差异？guardsservices

目前一些相关文件看起来像这样（为了简洁起见缩短了）：

登陆模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { LandingRoutingModule } from './landing.routing.module';

import { SharedModule } from '../shared/shared.module';
import { CoreModule } from '../core/core.module';
import { SecurityModule } from …

这是我的 Heroes.component.html：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <h1>
        <h2>{{hero.name}} Details</h2>
        <div><span>id: </span>{{hero.id}}</div>
        <div><span>name: </span>{{hero.name}}</div>
        <app-heroes></app-heroes>
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>

这是我的 Heroes.component.ts：

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
    
@Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
    
    constructor() { } …

我对 Angular 和 Firebase\FireStore 很陌生，我发现在尝试将 Firestore 连接添加到我的项目时遇到了以下困难。

我正在按照官方文档将其添加到我的特定项目中：https : //github.com/angular/angularfire/blob/master/docs/install-and-setup.md

所以，首先，我通过 NPM 在我的项目中安装了 AngularFire：

npm install --save firebase @angular/fire

然后我做了：

ng add @angular/fire

然后我以这种方式配置了我的/src/environments/environment.ts文件：

export const environment = {
  production: false,
  firebase: {
    apiKey: "MY-API-KEY",
    authDomain: "soc-dashboard.firebaseapp.com",
    databaseURL: "https://soc-dashboard.firebaseio.com",
    projectId: "soc-dashboard",
    storageBucket: "soc-dashboard.appspot.com",
    messagingSenderId: "801320773797"
    //appId: "1:801320773797:web:14e69306da7b0838d4c54c",
    //measurementId: "G-BHVTXG6CY4"
  }
};

然后我以这种方式配置了我的/src/app/app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import …

我创建了一个 Angular-Library，它在我的 App-Workspace 之外。结果是我有两个不同的工作区。

我的第一种方法是构建我的库并将/dist文件夹与我的应用程序链接起来。这在 ng serve 上效果不佳，但无论如何我在渲染我的 Library-Component-Templates 时遇到了问题。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'bindingStartIndex' of null
TypeError: Cannot read property 'bindingStartIndex' of null
[...]

在做我的第一次研究时，我发现了这个 github 问题帖子

基本上给定的解决方案是在我的 tsconfig.json 中添加我的库public-api.ts中的路径，该路径可以导入到我的应用程序源中。像这样：

    "paths": {
    "@app/*": ["src/app/*"],
      "@core": ["src/app/@core"],
    "@core/*": ["src/app/@core/*"],
    "@shared": ["src/app/@shared"],
    "@shared/*": ["src/app/@shared/*"],
      "@env/*": ["src/environments/*"],
      "@myLibrary/*": ["../myLibrary/projects/myLibrary/src/public-api"]
  }

不知何故，我在渲染模板时仍然遇到同样的问题。

因此，我的最后一种方法只是直接从我的 app.module.ts 导入我的 lib-Component

import { TestComponent } from '../../../../myLibrary/projects/myLibrary/src/lib/components/testComponent/test.component';
   @NgModule({
     imports: [
       FlexLayoutModule,
       CelNgZuiModule,
       CommonModule
   ],
   declarations: [FactoryModelComponent, TestComponent,]
   }) …